<template>
  <div @click="toLyric" class="box">
    <img src="/img/needle-ip6.png" alt="" id="inflexion" class="playInterface"
         :style="'transform: rotate('+deg1+'deg)'">
    <img src="/img/blackCircle.png" alt="" class="playInterface">
    <img :src="songImgUrl" alt="" id="songImg" class="playInterface" :style="'transform: rotate('+deg+'deg)'">
    <p id="lyric" class="playInterface"></p>
  </div>
</template>

<script>
export default {
  name: "CompactDisc",
  data(){
    return {
      songImgUrl:''
    }
  },
  methods:{
    toLyric(){

    }
  },
  props : {
    deg:Number,
    deg1:Number
  },
  created() {
    this.songImgUrl = this.$route.query.picUrl
  }
}
</script>

<style scoped lang="less">
  .box {
    position: relative;
    padding-top: 1px;
    >img:nth-of-type(1) {
      position: absolute;
      top: 0;
      left: 50%;
      height: 130px;
      width: 92px;
      transform: rotate(-25deg);
      transform-origin: left top;
    }
    >img:nth-of-type(2) {
      margin-top: 50px!important;
      height: 300px;
      width: 300px;
      display: block;
      margin: auto;
    }
    >img:nth-of-type(3) {
      height: 190px;
      width: 190px;
      border-radius: 50%;
      display: block;
      margin: -245px auto 85px;
      transform: rotate(-0deg);
    }
    >p {
      position: absolute;
      top: 350px;
      font-size: 20px;
      width: 80%;
      height: 50px;
      margin: 0 10%;
      text-align: center;
      color: rgb(209, 28, 173);
      font-weight: 700;
      display: flex;
      justify-content: center;
      align-items: center;
      text-shadow: 3px 3px 3px;
      overflow: auto;
    }
  }
</style>